<script setup lang="ts">
  const handleUpload = (e: Event) => {
    const files = (e.target as HTMLInputElement).files
    if (!files) {
      return
    }
    // 读取选择的文件
    console.log(Object.prototype.toString.call(files[0]))
  }

  // 使用slice方法来实现下对文件的分片。
  const createFileChunks = (file: File) => {
    const fileChunkList = []
    let cur = 0
    while (cur < file.size) {
      fileChunkList.push({
        file: file.slice(cur, cur + CHUNK_SIZE),
      })
      cur += CHUNK_SIZE // CHUNK_SIZE为分片的大小
    }
    return fileChunkList
  }

  /**
   * 计算文件的hash值，计算的时候并不是根据所用的切片的内容去计算的，那样会很耗时间，我们采取下面的策略去计算：
   * 1. 第一个和最后一个切片的内容全部参与计算
   * 2. 中间剩余的切片我们分别在前面、后面和中间取2个字节参与计算
   * 这样做会节省计算hash的时间
   */
  const calculateHash = async (fileChunks: Array<{ file: Blob }>) => {
    return new Promise((resolve) => {
      const spark = new sparkMD5.ArrayBuffer()
      const chunks: Blob[] = []

      fileChunks.forEach((chunk, index) => {
        if (index === 0 || index === fileChunks.length - 1) {
          // 1. 第一个和最后一个切片的内容全部参与计算
          chunks.push(chunk.file)
        } else {
          // 2. 中间剩余的切片我们分别在前面、后面和中间取2个字节参与计算
          // 前面的2字节
          chunks.push(chunk.file.slice(0, 2))
          // 中间的2字节
          chunks.push(chunk.file.slice(CHUNK_SIZE / 2, CHUNK_SIZE / 2 + 2))
          // 后面的2字节
          chunks.push(chunk.file.slice(CHUNK_SIZE - 2, CHUNK_SIZE))
        }
      })

      const reader = new FileReader()
      reader.readAsArrayBuffer(new Blob(chunks))
      reader.onload = (e: Event) => {
        spark.append(e?.target?.result as ArrayBuffer)
        resolve(spark.end())
      }
    })
  }
</script>

<template>
  <h1 style="text-align: center">大文件上传</h1>
  <input type="file" ref="fileInput" @change="handleUpload" />
</template>

<style lang="scss" scoped></style>
